<template>
	<view class="path-list">
		<bolck v-for="(item,index) in list" :key="index">
			<PathItem :data="item" :index='index' :disable="true"></PathItem>
		</bolck>
		<view class="add-path">
			<view class="add-path-item" @tap="goAddPath">新增地址</view>
		</view>
	</view>
</template>

<script>
	import PathItem from '../../components/path/path-item.vue'
	import $http from '../../common/api/request.js'
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				isSelectedPath:false
			}
		},
		computed:{
			...mapState({
				list:state=>state.path.list
			})
		},
		components:{
			PathItem
		},
		onLoad(e) {
			if(e.type == 'selectedPath'){
				this.isSelectedPath = true
			}
			// 初始化拿到收货地址数据
			this.__initAddress();
		},
		methods: {
			...mapMutations(['__initAddressList']),
			// 发起请求 从数据库中拿到对应用户的地址
			__initAddress(){
				$http.request({
					url:'/selectAddress',
					method:'POST',
					header:{
						token:true
					}
				}).then((res)=>{
					this.__initAddressList(res)
				})
			},
			// 点击修改地址 将地址中中的数据作为对象传递过去
			reviseAddPath(index){
				let pathObj = JSON.stringify({
					index:index,
					item:this.list[index]
				})
				uni.navigateTo({
					url:"/pages/add-path/add-path?data="+pathObj+""
				})
			},
			// 删除地址
			deletePath(item,index){
				uni.showModal({
					title:'提示',
					content:'确定要删除地址吗',
					success: (res) => {
						if(res.confirm){
							$http.request({
								url:'/deletAddress',
								method:'POST',
								header:{
									token:true
								},
								data:{
									addressId:item.id
								}
							}).then((res)=>{
								uni.showToast({
									title:'删除成功',
									icon:'none'
								})
								this.__initAddress();
							}).catch(()=>{
								uni.showToast({
									title:'删除失败',
									icon:'none'
								})
							})
						}else{
							return;
						}
					}
				})
			},
			// 跳转新增地址页面
			goAddPath(){
				uni.navigateTo({
					url:"/pages/add-path/add-path"
				})
			},
			// 判断是否是从确认订单页面过来的
			goConfirmOrder(item){
				if(this.isSelectedPath){
					uni.$emit('selectPathItem',item);
					uni.navigateBack({
						delta:1
					})
				}
			}
		}
	}
</script>

<style scoped>
.path-item{
	padding:10rpx 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #e1e1e1;
}
.item-left{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.item-info{
	display: flex;
	padding-left: 15rpx;
	flex-direction: column;
	align-items: flex-start;
}
.name-phone{
	width: 300rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.addressImage{
	width: 40rpx;
	height: 40rpx;
}
.pen{
	width: 40rpx;
	height: 40rpx;
}
.add-path{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 80rpx;
	background-color: #49bdfb;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
}
.detialAddress{
	display: flex;
	justify-content: center;
	align-items: center;
}
.addressDefault{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60rpx;
	background-color: #49bdfb;
	color: white;
	border-radius: 50rpx;
	font-size: 18rpx;
	margin-left: 20rpx;
}
.item-right{
	width: 140rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #b1b1b1;
}
.operateBtn{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20rpx;
	width: 60rpx;
	height: 30rpx;
	border: 2rpx solid #49bdfb;
	border-radius: 50rpx;
	color: #49bdfb;
}
</style>
